@extends('layout.main')
@section('css')
<link rel="stylesheet" href="/assets/js/plugins/jstree/themes/default/style.min.css" />
<link rel="stylesheet" href="/assets/js/plugins/blueimp/css/style.css">
<link rel="stylesheet" href="/assets/js/plugins/blueimp/css/jquery.fileupload.css">
<!-- <link rel="stylesheet" href="/assets/js/plugins/tagsinput/bootstrap-tagsinput.css">
<link rel="stylesheet" href="/assets/js/plugins/tagsinput/app.css"> -->
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <div>
                <form id="form" method="post" class="form-horizontal" action="/topic/edit">
                <input type="hidden" name="id" value="{{$info->id}}">
                    <div class="form-group"><label class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-10"><input type="text" name="title" class="form-control" value="{{$info->title}}"></div>
                    </div>
                    
                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group"><label class="col-sm-2 control-label">精简标题</label>
                        <div class="col-sm-10"><input type="text" name="subtitle" class="form-control" value="{{$info->subtitle}}"></div>
                    </div>
                    
                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group"><label class="col-sm-2 control-label">分类</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="tid" name="tid">
                                <option value="1" @if($info->tid==1) selected="selected" @endif>电脑</option>
                                <option value="2" @if($info->tid==2) selected="selected" @endif>手机</option>
                            </select>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group"><label class="col-sm-2 control-label">类型</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="type_id" name="type_id">
                                <option value="">全部</option>
                                <option value="1" @if($info->type_id==1) selected="selected" @endif>软件专题</option>
                                <option value="2" @if($info->type_id==2) selected="selected" @endif>游戏专题</option>
                                <option value="3" @if($info->type_id==3) selected="selected" @endif>素材专题</option>
                            </select>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group"><label class="col-sm-2 control-label">上传图片</label>
                        <div class="col-sm-10">
                            <!-- The fileinput-button span is used to style the file input field as button -->
                            <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i>
                                <span>选择文件</span>
                                <!-- The file input field used as target for the file upload widget -->
                                <input id="fileupload" type="file" name="file"></span>
                            <!-- The container for the uploaded files -->
                            <div id="files" class="files">
                                <div>
                                <img src="{{$info->image}}" width='100px' height='100px'/>
                                <input type='text' name='image' class='form-control' readonly='readonly' value="{{$info->image}}"/>
                                </div>
                            </div>
                            <!-- The global progress bar -->
                            <div id="progress" class="progress">
                                <div class="progress-bar progress-bar-success"></div>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>

                    <div class="form-group"><label class="col-sm-2 control-label">关键字</label>
                        <div class="col-sm-10"><input type="text" name="relkey" class="form-control" value="{{$info->relkey}}"></div>
                    </div>
                    
                    <!-- <div class="hr-line-dashed"></div>

                    <div class="form-group"><label class="col-sm-2 control-label">标签</label>

                    <div class="col-sm-10"><input type="text" id="tagIn" name="tagIn" /></div>

                    </div> -->
                    
                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group"><label class="col-sm-2 control-label">描述</label>

                     <div class="col-sm-10">
                        <textarea class="form-control" rows="5" id="content" name="content">{{$info->content}}</textarea>
                    </div>

                    </div>

                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">排序</label>
                        <div class="col-sm-10">
                            <label class="checkbox-inline">
                                <input name="sort" type="checkbox" value="1" @if($info->sort==1) checked="checked" @endif>
                                推荐
                            </label>
                        </div>
                    </div>

                   <!--  <div class="hr-line-dashed"></div>
                    
                    <div class="form-group"><label class="col-sm-2 control-label">推荐</label>
                        <div class="col-sm-10"><input type="text" name="sort" class="form-control" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " value="{{$info->sort}}"></div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group"><label class="col-sm-2 control-label">必备</label>
                        <div class="col-sm-10"><input type="text" name="pre" class="form-control" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " value="{{$info->pre}}"></div>
                    </div>
                    
                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group"><label class="col-sm-2 control-label">常用</label>
                        <div class="col-sm-10"><input type="text" name="comuse" class="form-control" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " value="{{$info->comuse}}"></div>
                    </div>
                     -->

                    <div class="hr-line-dashed"></div>

                    <div class="form-group"><label class="col-sm-2 control-label">状态</label>

                        <div class="col-sm-10">
                            <div>
                            <label><input type="radio" name="status_at" @if ($info->status_at==1) checked="checked" @endif value="1">启用</label>
                            <label><input type="radio" name="status_at" @if ($info->status_at==0) checked="checked" @endif value="0">禁用</label>
                            </div>
                        </div>
                    </div>
                   
                    <div class="hr-line-dashed"></div>
                   {!! csrf_field() !!}
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <button class="btn btn-white" type="reset">取消</button>
                            <button class="btn btn-primary" type="submit">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="/assets/js/plugins/blueimp/js/vendor/jquery.ui.widget.js"></script>
<script src="/assets/js/plugins/blueimp/js/jquery.iframe-transport.js"></script>
<script src="/assets/js/plugins/blueimp/js/jquery.fileupload.js"></script>
<!-- <script type="text/javascript" src="/assets/js/plugins/tagsinput/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="/assets/js/plugins/tagsinput/typeahead.bundle.js"></script> -->
<script type="text/javascript">
function removeimg(ele){
    $(ele).parent().parent().remove();
}
$(function(){
    // 图片上传
    'use strict';
    $('#fileupload').fileupload({
        url: '/topic/upload',
        dataType: 'json',
        limitMultiFileUploads: 1,
        singleFileUploads: true,
        done: function(e, data) {
            $.each(data.result.file, function(index, file) {
                var tmpimg = "<img src='" + file.url + "' width='100px' height='100px'/>";
                var tmpinput = "<input type='text' name='image' class='form-control' readonly='readonly' value='" + file.url + "'/>";
                $('#files').html('<div>' + tmpimg + tmpinput + '</div>')
                    // $('<div style="margin-top:20px;"/>').html(tmpimg + tmpinput).appendTo('#files');
            });
        },
        progressall: function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width',progress + '%');
        }
    }).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');

    $("#form").validate({
        rules: {
            title: {
                required: true
            },
            type_id: {
                required: true
            }
        },
        messages: {
            title: "请填写标题",
            type_id: "请选择分类"
        }
    });
})

</script>
@endsection